<template>
  <div class="page-content page-content-flag">
    <page-title :title=title v-show="!this.$route.query.jobData"></page-title>
    <!-- <page-item :itemList=itemList v-show="!this.$route.query.jobData"></page-item> -->
    <div class="page-item-container absolute-page-item" v-show="!this.$route.query.jobData">
        <div class="page-item" v-for="(item, key) in itemList" :key=key :class="{itemactive: onItem == item.id}" @click="changeActive(item.id)">{{item.deptname}}</div>
    </div>
    <div class="view-container">
      <no-ssr>
        <nuxt-child @onData='getList' :pageId="currentPageId" />
      </no-ssr>
    </div>
  </div>
</template>

<script>
import pageTitle from '@/components/pageTitle'
import pageItem from '@/components/pageItem'
import jobModul from '@/components/jobs/job_modul'
import dom from '@/api/dom'
import {firstDeptTdeptList} from '@/api/getData'

export default {
  layout: 'rest',
  head () {
    return {
      title: '福建国科诚聘英才',
      meta: [
        { hid: 'baidu-site-verification', name: 'baidu-site-verification', content:'T7mU7Yw8NB' },
        { hid: 'keywords', name: 'keywords', content: '国科教育，在线教育，IT人才培养，IT培训，软件开发培训，编程培训，软件工程师培训班，成都IT培训机构，程序员培训机构' },
        { hid: 'description', name: 'description', content: '国科科技业务涉及校企产教融合合作运营，校企联合IT人才培 养服务，智慧校园建设与运营。专注于对IT产业知识的理解和把握，定位产教融合人才解决方案提供者和服务者的角色，积极整合地方高校与IT产业链多环节资源，合作高校服务于产业，为高校和企业客户 提供优质的人才服务和项目服务。' }
      ]
    }
  },
  data() {
    return{
      title: '与企业同行，让梦想靠岸',
      onItem: 0,
      itemList: [],
      currentPageId: null,
      breadList: [
        {
          text: '诚聘英才',
          routeName: 'jobs'
        },
        {
          text: '',
          routeName: ''
        }
      ]
      // itemList: [
      //   {
      //     name: '国科教育',
      //     routeName: 'jobs-college'
      //   },
      //   {
      //     name: '软件项目中心',
      //     routeName: 'jobs-project'
      //   },
      //   {
      //     name: 'ICT项目中心',
      //     routeName: 'jobs-ICT'
      //   },
      //   {
      //     name: '企业市场部',
      //     routeName: 'jobs-company'
      //   },
      //   {
      //     name: '教学市场部',
      //     routeName: 'jobs-teaching'
      //   },
      //   {
      //     name: '人力资源部',
      //     routeName: 'jobs-manpower'
      //   },
      //   {
      //     name: '软件研发部',
      //     routeName: 'jobs-develop'
      //   }
      // ]
    }
  },
  methods: {
    getList(e){
      this.itemList = e
    },
    changeActive (on) {
      this.onItem = on
      this.$router.replace({
        path: `/jobs/list/${on}`
      })
    } 
  },
  created(){
    this.onItem = this.$route.params.id
  },
  mounted(){
    document.querySelector('.page-content').style.minHeight = dom.getHeight()
  },
  components: {
    pageTitle,
    pageItem,
    jobModul
  },
  watch:{
    $route(to,form){
      if(to.params.id){
        this.onItem = to.params.id
      }
    }
    // itemList(val,oldval){
    //   console.log(val,oldval)
    // }
  }
}
</script>

<style lang="stylus" scoped>
.page-content{
  background:rgba(245,245,245,1);
}
.view-container{
  width: 100%;
  background:rgba(245,245,245,1);
}
.detail_top{
  margin-top: 58px;
}
.page-item-container{
    width: 100%;
    min-width: 1200px;
    height:58px;
    line-height: 58px;
    background:rgba(255,255,255,1);
    text-align: center;
    border-bottom: 1px solid rgba(238,238,238,1);  
}
.page-item{
    display: inline-block;
    font-family:MicrosoftYaHei;
    font-size:18px;
    color:rgba(130,130,130,1);
    padding: 0 40px;
    position: relative;
    cursor: pointer;
    &:hover{
        color:rgba(20,87,253,1);
    }
    &:hover:after{
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -10px;
        content: '';
        width:20px;
        height:4px;
        color:rgba(20,87,253,1);
        background:rgba(20,87,253,1);  
    }
}
.itemactive{
    color:rgba(20,87,253,1);
}
.itemactive:after{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    content: '';
    width:20px;
    height:4px;
    background:rgba(20,87,253,1);  
}
</style>

